/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import TaskInfo from "./taskInfo.jsx";
import TabBar from "@/components/hjTabBar.jsx";
import { http } from "@/utils/request";
import api from "@/utils/api";
import { withRouter } from "react-router-dom";
import storage from "@/utils/storage.js";
import { getQueryString } from "@/utils/utils.js";
class Task extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lists: [],
    };
  }

  componentWillMount() {
    let openId = storage.get("openId");
    if (openId) {
      this.getPageMessageByOpenId();
    } else {
      let code = getQueryString("code");
      // 获取 userinfo
      http
        .post(api.getOpenId, {
          code: code || 1,
        })
        .then((res) => {
          let { openId, signStatus } = res.data;
          storage.set("userInfo", res.data);
          storage.set("openId", openId);
          this.getPageMessageByOpenId();
        });
    }
  }
  getPageMessageByOpenId = ()=>{
    http.post(api.getTaskForWeixin).then((res) => {
      this.setState({
        lists: res.data,
      });
    });
  }
  render() {
    return (
      <div className="task" style={{ height: "100%" }}>
        {this.state.lists.length ? (
          this.state.lists.map((item, index) => {
            return <TaskInfo item={item} key={index}></TaskInfo>;
          })
        ) : (
          <div
            className="flex flex-column-center"
            style={{ height: "100%", backgroundColor: "#fff" }}
          >
            <img src={require("../../images/task/noTask.png")} />
          </div>
        )}

        <TabBar selectedTab="task"></TabBar>
      </div>
    );
  }
}

export default withRouter(Task);
